import React, { memo, useState, useEffect, useRef, useCallback } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { BulletinWrapper } from "./style";
import { Route, Link, useHistory } from "react-router-dom";
import AppFooter from "../app-footer";
import { getBulletinDetail } from "@/service/index";
import { BellOutlined } from "@ant-design/icons";
import { AVATAR_UTL } from "@/common/contants";
import OtherBulletin from "@/views/index/child/bulletin";
import {getTime} from '@/utils/time'
export default memo(function Bulletin(props) {
  console.log(props.location.search);
  const id = props.location.search.split("=")[1];
  const [info, setinfo] = useState("");
  useEffect(() => {
    document.title = "一片月-公告中心";
    getBulletinDetail(id).then((res) => {
      console.log(res);
      setinfo(res.data);
    });
  }, []);

  return (
    <BulletinWrapper>
      <div className="contents">
        <div className="left">
          <div className="title">{info.title}</div>
          <div className="time">{info.dateAdd}</div>
          <div
            dangerouslySetInnerHTML={{ __html: info.content }}
            className="main-content"
          ></div>
          <div className="tips">一片月官方</div>
          <div className="addTime">{getTime(info.dateAdd)}</div>

        </div>

        <div className="right">
          <div className="top-info">
            <div className="info-title">公告</div>
            <div className="info">
              <div>
                <img src={AVATAR_UTL} alt="" />
              </div>
              <div>
                <div className="name">
                  官方公告
                  <i className="iconfont icon-guanfang"></i>
                  <i className="iconfont icon-renzheng"></i>
                </div>
                <div className="sign">一手伸向技术，一手伸向生活!</div>
              </div>
            </div>
          </div>
          <OtherBulletin className="otherBulletin"></OtherBulletin>
        </div>
      </div>

      <AppFooter></AppFooter>
    </BulletinWrapper>
  );
});
